<template>
  <el-form label-width="100px" ref="formRef" :model="dataForm" :rules="dataRule">
    <el-card class="box-card" shadow="never">
      <template v-slot:header>
        <div class="clearfix">
          <span>{{ i18n('client.statistics_info') }}</span>
        </div>
      </template>
      <div class="text item text-center">
        <statistics :model="model"/>
      </div>
    </el-card>

    <el-card class="box-card mt10" shadow="never">
      <template v-slot:header>
        <div class="clearfix">
          <span>{{ i18n('client.company_info') }}</span>
        </div>
      </template>
      <div class="text item">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item :label="i18n('client.tool')">
              <el-row style="width: 100%">
                <el-col v-for="(v, k) in toolsList" :span="4">
                  <el-link :href="v.url" :underline="false" target="_blank">
                    <img class="tool" :src="v.icon"/>
                    <span>{{ v.name }}</span>
                  </el-link>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="i18n('client.name')" prop="name">
              <el-input v-model="dataForm.name" :placeholder="i18n('common.please_input') + i18n('client.name')" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="i18n('client.level')" prop="level">
              <el-select
                v-model="dataForm.level"
                :placeholder="i18n('common.please_select') + i18n('client.level')" clearable>
                <el-option v-for="(v, k) in levelList" :label="v.text" :key="k" :value="v.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('client.scale')" prop="scale">
              <el-select
                v-model="dataForm.scale"
                :placeholder="i18n('common.please_select') + i18n('client.scale')" clearable>
                <el-option v-for="(v, k) in scaleList" :label="v.text" :key="k" :value="v.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('client.industry_id')" prop="industry_id">
              <el-cascader v-model="dataForm.industry_id" :placeholder="$t('common.please_select')+$t('example.industry_id')" :options="industryList" :props="levelProps" clearable></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="i18n('client.detail.registered_capital')" prop="registered_capital">
              <el-input
                v-model="dataForm.registered_capital"
                :placeholder="i18n('common.please_input') + i18n('client.detail.registered_capital')" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('client.detail.founding_time')" prop="founding_time">
              <el-date-picker
                v-model="dataForm.founding_time"
                type="date"
                :placeholder="i18n('common.please_select') + i18n('client.detail.founding_time')"
                clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('client.detail.company_type')" prop="company_type">
              <el-select
                v-model="dataForm.company_type"
                :placeholder="i18n('common.please_select') + i18n('client.detail.company_type')" clearable>
                <el-option v-for="(v, k) in companyTypeList" :label="v.text" :key="k" :value="v.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="i18n('client.detail.industry_ranking')" prop="industry_ranking">
              <el-select
                v-model="dataForm.industry_ranking"
                :placeholder="i18n('common.please_select') + i18n('client.detail.industry_ranking')" clearable>
                <el-option v-for="(v, k) in industryRankingList" :label="v.text" :key="k" :value="v.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('client.detail.company_url')" prop="company_url">
              <el-input v-model="dataForm.company_url" :placeholder="i18n('common.please_input') + i18n('client.detail.company_url')" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('client.detail.company_address')" prop="company_address">
              <el-input v-model="dataForm.company_address" :placeholder="i18n('common.please_input') + i18n('client.detail.registered_capital')" company_address></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item :label="i18n('client.detail.company_description')" prop="company_description">
              <el-input
                type="textarea"
                v-model="dataForm.company_description"
                :rows="5"
                show-word-limit
                maxlength="500"
                :placeholder="i18n('common.please_input') + i18n('client.detail.company_description')">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="i18n('client.detail.is_up')" prop="is_up">
              <el-switch
                v-model="dataForm.is_up"
                active-value="1"
                :active-text="i18n('common.yes')"
                inactive-value="2"
                :inactive-text="i18n('common.no')">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="box-card mt10" shadow="never">
      <template v-slot:header>
        <div class="clearfix">
          <span>{{ i18n('client.history_info') }}</span>
        </div>
      </template>
      <div class="text item">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="i18n('demand.demand_type')" prop="demand_type">
              <el-select
                v-model="dataForm.demand_type"
                :placeholder="i18n('common.please_select') + i18n('demand.demand_type')" clearable>
                <el-option v-for="(v, k) in demandTypeList" :label="v.text" :key="k" :value="v.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('demand.demand_time')" prop="demand_time">
              <el-date-picker v-model="dataForm.demand_time" type="month" :placeholder="i18n('common.please_input') + i18n('demand.demand_time')" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('client.history.demand_person')" prop="demand_person">
              <el-input v-model="dataForm.demand_person" :placeholder="i18n('common.please_input') + i18n('client.history.demand_person')" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="i18n('client.history.people_total')" prop="demand_person">
              <el-input v-model="dataForm.people_total" :placeholder="i18n('common.please_input') + i18n('client.history.people_total')" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('client.history.activity_crowd')" prop="demand_person">
              <el-input v-model="dataForm.activity_crowd" :placeholder="i18n('common.please_input') + i18n('client.history.activity_crowd')" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('client.history.activity_address')" prop="demand_person">
              <el-input v-model="dataForm.activity_address" :placeholder="i18n('common.please_input') + i18n('client.history.activity_address')" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="i18n('client.history.activity_journey')" prop="demand_person">
              <el-input v-model="dataForm.activity_journey" :placeholder="i18n('common.please_input') + i18n('client.history.activity_journey')" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('client.history.activity_overview')" prop="demand_person">
              <el-input v-model="dataForm.activity_overview" :placeholder="i18n('common.please_input') + i18n('client.history.activity_overview')" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('client.history.competitor')" prop="demand_person">
              <el-input v-model="dataForm.competitor" :placeholder="i18n('common.please_input') + i18n('client.history.competitor')" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="i18n('client.history.procurement_form')" prop="procurement_form">
              <el-select
                v-model="dataForm.procurement_form"
                :placeholder="i18n('common.please_select') + i18n('client.history.procurement_form')" clearable>
                <el-option v-for="(v, k) in procurementFormList" :label="v.text" :key="k" :value="v.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('client.history.activity_effect')" prop="demand_person">
              <el-input v-model="dataForm.activity_effect" :placeholder="i18n('common.please_input') + i18n('client.history.activity_effect')" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="i18n('client.history.opportunity')" prop="opportunity">
              <el-switch
                v-model="dataForm.opportunity"
                active-value="1"
                active-text="有机会"
                inactive-value="2"
                inactive-text="没机会">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item :label="i18n('client.history.remark')" prop="remark">
              <el-input
                type="textarea"
                v-model="dataForm.remark"
                :rows="5"
                show-word-limit
                maxlength="500"
                :placeholder="i18n('common.please_input') + i18n('client.history.remark')">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="box-card mt10" shadow="never">
      <div class="text item">
        <el-form-item>
          <el-button
            type="primary"
            @click="dataFormSubmit(formRef)">
            {{ i18n('common.confirm') }}
          </el-button>
          <el-button @click="resetForm(formRef)">
            {{ i18n('common.reset') }}
          </el-button>
        </el-form-item>
      </div>
    </el-card>
  </el-form>
</template>

<script setup name="client-basic-index">
  import { useBase } from "@/hooks/base/useBase"
  import { useForm } from "@/hooks/form/useForm"

  import Statistics from '@/components/business/client/statistics/index'

  import img1 from '@/assets/images/tool/1.png'
  import img2 from '@/assets/images/tool/2.png'
  import img3 from '@/assets/images/tool/3.png'
  import img4 from '@/assets/images/tool/4.png'
  import img5 from '@/assets/images/tool/5.png'

  const { router, query, i18n, isAuth } = useBase()

  const props = defineProps({
    model: {
      type: [String, Object],
      default: null,
    }
  });

  const levelProps = ref({
    label: 'title',
    value: 'id',
    checkStrictly: true
  })

  const levelList = ref([])
  const scaleList = ref([])
  const industryList = ref([])
  const companyTypeList = ref([])
  const industryRankingList = ref([])
  const procurementFormList = ref([])
  const demandTypeList = ref([])
  const toolsList = ref([])

  const dataForm = reactive({
    id: 0,
    name: '',
    level: '',
    scale: '',
    industry_id: '',
    company_type: '',
    registered_capital: '',
    founding_time: '',
    industry_ranking: '',
    company_url: '',
    company_address: '',
    company_description: '',
    is_up: '',
    demand_type: '',
    demand_time: '',
    demand_person: '',
    people_total: '',
    activity_crowd: '',
    activity_address: '',
    activity_journey: '',
    activity_overview: '',
    competitor: '',
    procurement_form: '1',
    activity_effect: '',
    opportunity: '',
    remark: '',
  })

  const dataRule = reactive({
    name: [{
      required: true,
      message: i18n('client.rules.name.require'),
      trigger: 'blur',
    }],
    level: [{
      required: true,
      message: i18n('client.rules.level.require'),
      trigger: 'blur',
    }],
    scale: [{
      required: true,
      message: i18n('client.rules.scale.require'),
      trigger: 'blur',
    }],
    industry_id: [{
      required: true,
      message: i18n('client.rules.industry_id.require'),
      trigger: 'blur',
    }],
    company_type: [{
      required: true,
      message: i18n('client.rules.company_type.require'),
      trigger: 'blur'
    }],
    registered_capital: [{
      required: true,
      message: i18n('client.rules.registered_capital.require'),
      trigger: 'blur'
    }],
    founding_time: [{
      required: true,
      message: i18n('client.rules.founding_time.require'),
      trigger: 'blur'
    }],
  })

  const {
    formRef,
    resetForm
  } = useForm(props.model, dataForm)

  const init = (form) => {
    dataForm.id = query.id || 0

    nextTick(() => {
      form.value.resetFields()
      if (dataForm.id) {
        $http({
          url: $http.adornUrl(`/${props.model}/view/${dataForm.id}`),
          method: 'get',
          params: $http.adornParams({}),
        }).then(({ data }) => {
          if (data && data.data && data.status === 200) {
            dataForm.id = data.data.id
            dataForm.name = data.data.name
            dataForm.level = data.data.level.value + ''
            dataForm.scale = data.data.scale.value + ''
            dataForm.industry_id = data.data.industry_id

            toolsList.value = [{
              'name': '企查查',
              'url': 'https://www.qcc.com/web/search?key='+dataForm.name,
              'icon': img1
            }, {
              'name': '爱企查',
              'url': 'https://aiqicha.baidu.com/s?q='+dataForm.name+'&t=0',
              'icon': img2
            }, {
              'name': '天眼查',
              'url': 'https://www.tianyancha.com/search?key='+dataForm.name+'&sessionNo=1714740589.22411029',
              'icon': img3
            }, {
              'name': '企信宝',
              'url': 'https://www.qixin.com/search?key='+dataForm.name,
              'icon': img4
            }, {
              'name': '国家企业信用信息公示系统',
              'url': 'https://www.gsxt.gov.cn/index.html',
              'icon': img5
            }];
          }
        }).then(() => {
          if (dataForm.id) {
            $http({
              url: $http.adornUrl(`/${props.model}/detail/data`),
              method: 'get',
              params: $http.adornParams({
                client_id: dataForm.id,
              }),
            }).then(({ data }) => {
              if (data && data.data && data.status === 200) {
                dataForm.company_type = data.data.company_type + ''
                dataForm.registered_capital = data.data.registered_capital
                dataForm.founding_time = data.data.founding_time
                dataForm.industry_ranking = data.data.industry_ranking.value + ''
                dataForm.company_url = data.data.company_url
                dataForm.company_address = data.data.company_address
                dataForm.company_description = data.data.company_description
                dataForm.is_up = data.data.is_up
              }
            })
          }
        }).then(() => {
          if (dataForm.id) {
            $http({
              url: $http.adornUrl(`/${props.model}/history/data`),
              method: 'get',
              params: $http.adornParams({
                client_id: dataForm.id,
              }),
            }).then(({ data }) => {
              if (data && data.data && data.status === 200) {
                dataForm.demand_type = data.data.demand_type + ''
                dataForm.demand_time = data.data.demand_time
                dataForm.demand_person = data.data.demand_person
                dataForm.people_total = data.data.people_total
                dataForm.activity_crowd = data.data.activity_crowd
                dataForm.activity_address = data.data.activity_address
                dataForm.activity_journey = data.data.activity_journey
                dataForm.activity_overview = data.data.activity_overview
                dataForm.competitor = data.data.competitor
                dataForm.procurement_form = data.data.procurement_form + ''
                dataForm.activity_effect = data.data.activity_effect
                dataForm.opportunity = data.data.opportunity
                dataForm.remark = data.data.remark
              }
            })
          }
        })
      }
    })
  }

  // 表单提交
  const dataFormSubmit = (form) => {
    form.validate(async (valid, fields) => {
      if (valid) {
        $http({
          url: $http.adornUrl(`/${props.model}/complete`),
          method: 'post',
          data: $http.adornData({
            id: dataForm.id || undefined,
            name: dataForm.name,
            level: dataForm.level,
            scale: dataForm.scale,
            industry_id: dataForm.industry_id,
            company_type: dataForm.company_type,
            registered_capital: dataForm.registered_capital,
            founding_time: dataForm.founding_time,
            industry_ranking: dataForm.industry_ranking,
            company_url: dataForm.company_url,
            company_address: dataForm.company_address,
            company_description: dataForm.company_description,
            is_up: dataForm.is_up,
            demand_type: dataForm.demand_type,
            demand_time: dataForm.demand_time,
            demand_person: dataForm.demand_person,
            people_total: dataForm.people_total,
            activity_crowd: dataForm.activity_crowd,
            activity_address: dataForm.activity_address,
            activity_journey: dataForm.activity_journey,
            activity_overview: dataForm.activity_overview,
            competitor: dataForm.competitor,
            procurement_form: dataForm.procurement_form,
            activity_effect: dataForm.activity_effect,
            opportunity: dataForm.opportunity,
            remark: dataForm.remark,
          }),
        }).then(({ data }) => {
          if (data && data.status === 200) {
            $message.success(i18n('common.handle_success'))
            router.go(-1)
          } else {
            $message.error(data.message)
          }
        })
      }
    })
  }

  const loadLevelList = () => {
    $http({
      url: $http.adornUrl('/dictionary/data'),
      method: 'get',
      params: $http.adornParams({
        title: 'client_level',
      }),
    }).then(({data}) => {
      if (data && data.status === 200) {
        levelList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }


  const loadScaleListList = () => {
    $http({
      url: $http.adornUrl('/dictionary/data'),
      method: 'get',
      params: $http.adornParams({
        title: 'scale_level',
      }),
    }).then(({data}) => {
      if (data && data.status === 200) {
        scaleList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }

  const loadIndustryList = () => {
    $http({
      url: $http.adornUrl('/industry/select'),
      method: 'get',
      params: $http.adornParams({}),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        industryList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }

  const loadCompanyTypeList = () => {
    $http({
      url: $http.adornUrl('/dictionary/data'),
      method: 'get',
      params: $http.adornParams({
        title: 'company_type',
      }),
    }).then(({data}) => {
      if (data && data.status === 200) {
        companyTypeList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }

  const loadIndustryRankingList = () => {
    $http({
      url: $http.adornUrl('/dictionary/data'),
      method: 'get',
      params: $http.adornParams({
        title: 'company_sort',
      }),
    }).then(({data}) => {
      if (data && data.status === 200) {
        industryRankingList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }

  const loadProcurementFormList = () => {
    $http({
      url: $http.adornUrl('/dictionary/data'),
      method: 'get',
      params: $http.adornParams({
        title: 'procurement_form',
      }),
    }).then(({data}) => {
      if (data && data.status === 200) {
        procurementFormList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }

  const loadDemandTypeList = () => {
    $http({
      url: $http.adornUrl('/dictionary/data'),
      method: 'get',
      params: $http.adornParams({
        title: 'demand_type',
      }),
    }).then(({data}) => {
      if (data && data.status === 200) {
        demandTypeList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }

  onMounted(() => {
    init(formRef)

    loadLevelList()
    loadScaleListList()
    loadIndustryList()
    loadCompanyTypeList()
    loadProcurementFormList()
    loadDemandTypeList()
  })
</script>

<style scoped lang="scss">
  .tool {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
  }
</style>
